<template>
	<div class="table-use">
		<el-card class="box-card">
			<div slot="header" class="clearfix">
				<span>选择列表</span>
				<el-button type="primary" size="mini" style="margin-left: 20px" @click="selectTable"
					>选择</el-button
				>
			</div>

			<el-table
				:data="tableData"
				@expand-change="getChildTable"
				@sort-change="tableUpdata"
				:expand-row-keys="expands"
				:span-method="cellMerge"
				row-key="uniId"
				border
				style="width: 100%"
			>
				<el-table-column
					type="expand"
					label="展开"
					width="100px"
					header-align="center"
					:show-overflow-tooltip="true"
				>
					<template slot-scope="scope">
						<!-- 子表格 -->
						<el-table
							:data="scope.row.child"
							row-key="id"
							border
							style="width: 90%; margin-left: 20px"
						>
							<el-table-column
								prop="id"
								label="编号"
								header-align="center"
								:show-overflow-tooltip="true"
							>
							</el-table-column>
							<el-table-column
								prop="address"
								label="地址"
								header-align="center"
								:show-overflow-tooltip="true"
							>
							</el-table-column>
						</el-table>
					</template>
				</el-table-column>
				<el-table-column
					prop="id"
					label="ID"
					header-align="center"
					:show-overflow-tooltip="true"
				></el-table-column>
				<el-table-column
					prop="name"
					label="名称"
					header-align="center"
					:show-overflow-tooltip="true"
				>
				</el-table-column>
				<el-table-column
					prop="qty"
					label="数量"
					header-align="center"
					:show-overflow-tooltip="true"
				>
					<template slot-scope="scope">
						<el-input
							v-model="scope.row.qty"
							placeholder="数量"
							type="number"
							min="0"
							step="0.01"
						></el-input>
					</template>
				</el-table-column>
				<el-table-column
					label="操作"
					header-align="center"
					:show-overflow-tooltip="true"
					align="center"
				>
					<template slot-scope="scope">
						<el-button
							type="text"
							size="small"
							@click.native.prevent="deleteRow(scope.$index, scope.row)"
							>移除</el-button
						>
						<el-button
							type="text"
							size="small"
							@click.native.prevent="addRow(scope.$index, scope.row)"
							>克隆</el-button
						>
					</template>
				</el-table-column>
			</el-table>
		</el-card>

		<!-- 弹窗 -->
		<el-dialog
			title="选择"
			ref="dialogSelect"
			:visible.sync="dialogVisible"
			width="70%"
			center
			:close-on-click-modal="false"
		>
			<el-table
				:data="selectTableData"
				ref="multipleTable"
				@sort-change="tableUpdata"
				@selection-change="handleSelectionChange"
				row-key="id"
				border
			>
				<el-table-column
					type="selection"
					width="40"
					:reserve-selection="true"
					header-align="center"
					align="center"
				></el-table-column>
				<el-table-column
					prop="id"
					label="ID"
					header-align="center"
					:show-overflow-tooltip="true"
				></el-table-column>
				<el-table-column
					prop="name"
					label="名称"
					header-align="center"
					:show-overflow-tooltip="true"
				>
				</el-table-column>
			</el-table>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="confirmTableData">确 定</el-button>
				<el-button @click="dialogVisible = false">取 消</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
export default {
	name: 'table-use',
	data() {
		return {
			dialogVisible: false, //弹窗
			expandedFlag: 0, //展开标记,避免开关都请求后端
			tableData: [], //选择列表数据
			spanArr: [], //表格行数数组
			pos: 0, //表格行数数组索引
			expands: [], // 展开项
			tableDetailData: [
				{
					id: '101',
					address: '上海市普陀区金沙江路1弄',
				},
				{
					id: '102',
					address: '上海市普陀区金沙江路2弄',
				},
			], //子列表
			checkedTableData: [], //弹窗列表选中数据
			//弹窗列表数据
			selectTableData: [
				{
					id: '1',
					uniId: '1',
					name: '王小虎1',
					qty: '1',
				},
				{
					id: '2',
					uniId: '2',
					name: '王小虎2',
					qty: '2',
				},
				{
					id: '3',
					uniId: '3',
					name: '王小虎3',
					qty: '3',
				},
			],
		};
	},
	mounted() {
		this.tableData = this.selectTableData;
		this.handleTableArr(this.tableData);
	},
	methods: {
		//移除
		deleteRow(index, row) {
			console.log('移除行');
			console.log(row);
			this.tableData.splice(index, 1);
			this.handleTableArr(this.tableData);
		},
		//添加
		addRow(index, row) {
			let newRow = JSON.parse(JSON.stringify(row));
			newRow.uniId = newRow.uniId + '1'; //避免重复id
			this.tableData.splice(index + 1, 0, newRow);
			this.handleTableArr(this.tableData);
		},
		//固定列的边框合并方法
		cellMerge({ row, column, rowIndex, columnIndex }) {
			console.log('当前行' + row + '当前列' + column);
			// 当前行号rowIndex
			// 当前列号columnIndex
			if (columnIndex < 3) {
				//合并规则-相同id前3列合并单元格
				const _row = this.spanArr[rowIndex];
				const _col = _row > 0 ? 1 : 0;
				return {
					rowspan: _row,
					colspan: _col,
				};
			}
		},
		// 生成一个与行数相同的数组，记录每一行设置的合并数
		handleTableArr(data) {
			this.spanArr = [];
			for (let i = 0; i < data.length; i++) {
				if (i === 0) {
					this.spanArr.push(1);
					this.pos = 0;
				} else {
					// 判断此条和上一条id是否相同
					if (data[i].id === data[i - 1].id) {
						this.spanArr[this.pos] += 1;
						this.spanArr.push(0);
					} else {
						this.spanArr.push(1);
						this.pos = i;
					}
				}
			}
		},
		//获取子表格
		getChildTable(info, expandedRows) {
			console.log(expandedRows);
			// 不需要记录展开状态
			// if (this.expandedFlag < expandedRows.length) {
			// 	console.log('展开');
			// 	this.tableData.forEach((temp, index) => {
			// 		if (temp.id === info.id) {
			// 			this.tableData[index].child = this.tableDetailData;
			// 		}
			// 	});
			// }
			// this.expandedFlag = expandedRows.length;
			// 记录展开状态
			if (this.expands.includes(info.id)) {
				this.expands = this.expands.filter((ele) => ele != info.id);
			} else {
				this.tableData.forEach((temp, index) => {
					if (temp.id === info.id) {
						this.tableData[index].child = this.tableDetailData;
					}
				});
				this.expands.push(info.id);
			}
		},
		tableUpdata() {},
		//点击复选框
		handleSelectionChange(val) {
			this.checkedTableData = val;
		},
		// 确定
		confirmTableData() {
			this.dialogVisible = false;
			this.tableData = this.checkedTableData;
			this.handleTableArr(this.tableData);
		},
		// 打开弹窗更新列表
		selectTable() {
			this.dialogVisible = true;
			// 取消选中
			if (this.checkedTableData.length) {
				this.$refs.multipleTable.clearSelection();
			}
			// 反选
			this.tableData.forEach((row) => {
				this.$refs.multipleTable.toggleRowSelection(row);
			});
		},
	},
};
</script>
